<template>
  <div class="app-container">222
      <el-row style="margin: 10px">
      <el-button-group v-if="form.newStep >= 10">
        <el-button icon="edit" @click="showPacking">查看提箱单</el-button>
      </el-button-group>
      <el-button-group v-if="isAgent && form.newStep >= 20 && form.newStep <= 30" style="margin-left:20px; ">
        <el-button icon="edit" @click="showReturnInfo">查看还箱单</el-button>
      </el-button-group>
    </el-row>
  <el-col :span ="24" class="marginTop20">
      <Progress :userRole="'boxHuiDiao_agent'" :orderStatus="form.status" :payStatus="5" :returnedPay="form.returnedPay" ></Progress>
  </el-col>
   <el-card class="marginTop20">
     <!-- 图章 -->
      <div style="position: absolute;top:120px;right: -5px;">
        <stamp v-if="![20, 25, 30, 35, 40, 45].includes(form.processBusinessType)" :rowData="form" :pageType="'callBackBox'" style="margin:10px 50px;" />
        <stampCancel v-else :rowData="form" :pageType="'callBackBox'" :canceledType="form.canceledType" :roleType="isAgent ? 'agent' : 'boxEast'" style="margin:10px 50px;" />
      </div>
    <div class="title-top flex-between">
       <div class="title-top-fl">{{form.companyName}}</div>
     <div class="title-top-fr" style="color: #2158F3;cursor: pointer;" @click="allIsTap" v-if="allIs"> 收起<el-icon><CaretTop /></el-icon></div>
     <div class="title-top-fr" style="color: #2158F3;cursor: pointer;" @click="allIsTap" v-else> 展开<el-icon><CaretBottom /></el-icon></div>

    </div>
    <div class="xlMain" v-show="allIs">
       <div class="xlMain-list">
          <div class="xlMain-lable"><el-icon color="#22A86D"><LocationFilled /></el-icon>出发城市</div>
          <div class="xlMain-lable">箱贴单价</div>
          <div class="xlMain-lable">预还量</div>
          <div class="xlMain-lable"><el-icon color="#FF4B40"><LocationFilled /></el-icon>到达城市</div>
       </div>
       <div class="xlMain-list" v-for="(item, index) in priceList" :key="index">
          <div class="xlMain-lable">
             <div  v-if="index==0">
             {{form.carryCityName}}
            </div>
                <!-- <el-select id="el-select " v-if="index==0" v-model="carryCityInfo.cityId" style="width:40%" placeholder="请选择">
                  <el-option v-for="item in carryCityList" :key="item.cityId" :label="item.cityName" :value="item.cityId" />
                </el-select> -->
          </div>
          <div class="xlMain-lable">
             <el-input
              v-model.trim="item.unitPrice"
              :formatter="formatterNumber" :parser="formatterNumber"
                placeholder="请输入"
                class="input-with-select"
                maxlength="8"
                :disabled="disabledShow"
                clearable
              >
                <template #prepend>$</template>>
              </el-input> 
          </div>
          <div class="xlMain-lable">
            <el-input-number v-model.trim="item.boxQuantity" :disabled="disabledShow" :min="0" maxlength="8"  />

          </div>
          <div class="xlMain-lable flex-cen">
             <el-select style="width:220px" @change="returnCityIdChang(item.returnCityId,index)" :disabled="disabledShow" clearable v-model="item.returnCityId" placeholder="请选择">
                  <el-option v-for="item in returnCityList" :label="item.returnCityName" :value="item.returnCityId"
                    :key="item.returnCityId" />
                </el-select>
            <el-icon v-if="!disabledShow" color="#D8D8D8" size="20px" style="margin-left: 20px;" @click="handleDelete(index,1)"><Remove /></el-icon>
          </div>

       </div>
       <div class="xlMain-list">
         <div class="xlMain-lable">
          </div>
          <div class="xlMain-lable" style="text-align: left;">
            <el-icon v-if="!disabledShow" color="#2158F3" size="20px" @click="handleAdd(1)"><CirclePlus /></el-icon>
          </div>

       </div>
       <div class="zlAmo">总量：{{totalNumber}}个</div>
    </div>
   </el-card>
   <el-card class="marginTop20">
    <span class="_before">订单消息</span>
    <div class="mian-cen">
      <div class="mian-cen-top">
        <div class="mian-cen-top-fl">
          <img :src="mainFileList[0]?.url" style="width: 300px;margin-right: 20px;" />
        </div>
         <div class="mian-cen-top-fr">
            <div  class="mian-cen-list">
              <div class="mian-cen-item">
                <div class="item-label">箱型：</div>
                <div class="item-value">{{ { 5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP' }[form.boxType] }}</div>
              </div>


              <div class="mian-cen-item">
                <div class="item-label">箱况：</div>
                <div class="item-value">{{ { 5: '全新', 10: '次新', 15: '适货', 20: '混提' }[form.boxCondition] }}</div>
              </div>
              <div class="mian-cen-item">
                <div class="item-label">箱使期：</div>
                <el-input  v-model="form.boxUsagePeriod" :disabled="disabledShow" :formatter="formatterNumber" :parser="formatterNumber" :min="0" :max="999" :precision="0"  placeholder="请输入箱使期" maxlength="5" >
                  <template #append>天</template>
                </el-input>
              </div>
            </div>
            <div  class="mian-cen-list">
              <div class="mian-cen-item">
                <div class="item-label red-star">预计提箱日期：</div>
                <div class="item-value">
            <el-date-picker type="date" v-model="form.planPickupDate" :disabled="disabledShow" placeholder="请选择日期" clearable />
<!-- 
                  <el-date-picker v-model="param.createDate" type="date" range-separator="-" start-placeholder="开始日期"
          end-placeholder="结束日期" /> -->
                </div>
              </div>
              <div class="mian-cen-item">
                <div class="item-label red-star">支付方式：</div>
                <el-select placeholder="请选择" clearable :disabled="disabledShow" v-model="form.paymentMethod">
                  <el-option label="对公转账" :value="5" />
                  <el-option label="在线支付" :value="10" />
                </el-select>
              </div>
              <div class="mian-cen-item">
                <div class="item-label">结算账期：</div>
                <el-input v-model="form.period" :formatter="formatterNumber" :parser="formatterNumber" :disabled="disabledShow" placeholder="请输入结算账期" maxlength="5" >
                  <template #append>天</template>
                </el-input>
              </div>
            </div>
            <div  class="mian-cen-list">
              <div class="mian-cen-item">
                <div class="item-label">联系人：</div>
                <div class="item-value">{{form.boxEastUserName  || '--'}}</div>
              </div>
              <div class="mian-cen-item">
                <div class="item-label">联系电话：</div>
                <div class="item-value">
                  <span style="margin-right: 10px;">+{{form.boxEastUserAreaCode}}</span>
                  <span>{{form.boxEastUserTel || '--'}}</span>
                </div>
              </div>
              <div class="mian-cen-item">
                <!-- <div class="item-label">联系电话：</div> -->
                <div class="item-value">
                  超期 1 天，$10 /箱/天；超期10天后仍未还箱，视为灭失，灭失费为 $ 10
                </div>
              </div>
            </div>
         </div>
      </div>
       <div class="mian-cen-list">
              <div class="mian-cen-item">
                <div class="item-label red-star">经办人：</div>
                <div class="item-value">{{ userInfo.nickname }}</div>
              </div>
               <div class="mian-cen-item">
                <div class="item-label red-star">操作员：</div>
                <el-select v-model="form.boxEastOperatorUserId" clearable placeholder="请选择">
                  <el-option v-for="item in userSimple"
                      :key="item.userId"
                      :label="item.nickname"
                      :value="item.userId" />
                </el-select>
                </div>
        </div>   
        <div class="mian-cen-list">
              <div class="mian-cen-item">
                  <el-icon color="#2158F3" v-if="!disabledShow" @click="handleAdd(2)" size="20px"><CirclePlus /></el-icon>
              </div>
        </div>        
        <div class="remak">
           <div class="remak-title">留言</div> 
           <el-input  placeholder="请输入内容" :disabled="disabledShow" :formatter="containsEmoji" v-model="form.leaveMsg" show-word-limit type="textarea" maxlength="500" />
        </div> 
         <div class="remak" v-if="form.status==35">
           <div class="remak-title">取消原因</div> 
           <el-input  placeholder="" :disabled="disabledShow" :formatter="containsEmoji" v-model="form.remark" show-word-limit type="textarea" maxlength="500" />
        </div> 
       
    </div>
   </el-card>
    <div class="foot">
        <div class="foot-list">
          <div style="margin-right: 20px;" v-if=" form.status == 2 && form.rentSource==5">
            <el-checkbox v-model="radioVal" size="large" />
          我已阅读《集装箱租赁业务规则》、《用户服务协议和管理规则》并同意全部条款
          </div>
          <div>
             <el-button @click="handleShowWarning('cancelOrder')" type="info" v-if=" form.status <= 10">取消订单</el-button>
          
             <el-button @click="handleSubmit" type="primary" v-if=" form.status == 2 && form.rentSource==5">确认</el-button>
             <el-button @click="showContract" type="primary" v-if=" form.status == 3">签署</el-button>
              <div v-if="!isAgent" style="display: inline-block;margin-left: 10px;">
                <el-button v-if="form.currentNodeType == 30 && form.status == 3" @click="completeSigning" type="primary">完成签署</el-button>
               <el-button v-if="form.status >= 5 && form.status <= 15" @click="handlePacking" type="primary">开提箱单</el-button>
              </div>
          </div>
       
        </div>
    </div>
    <!-- E签宝 -->
     <el-dialog v-model="param.dialogEVisibleWarning" @closed="handleCloseEQianBao" title="提示" style="width: auto;">
      <iframe v-if="param.dialogEVisibleWarning" :src="param.longContractUrl" width="100%" height="800px"
        frameborder="0"></iframe>
    </el-dialog>
     <!-- 开提箱单 -->
    <el-drawer v-model="param.drawerPacking" :show-close="false" :destroy-on-close="true" size="40%" :with-header="false">
      <el-row>
        <el-col :span="6">
          <span class="_before">开提箱单</span>
        </el-col>
      </el-row>
      <el-row align="middle">
        <el-col :span="4"><redStar />提箱单类型</el-col>
        <el-col :span="8" >
          <el-radio-group v-model="param.packingType">
            <el-radio value = "5" size="large">自有箱</el-radio>
            <el-radio value = "15" size="large">外调箱</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <OwnBox v-if="param.packingType == '5' " :packingInfo="param.packingInfo"  :orderType="10" @closeDialog="closeDialog"></OwnBox> 
      <!--自有箱-->
      <ExternalBox v-if="param.packingType == '15'" :packingInfo="param.packingInfo" :orderType="10" @closeDialog="closeDialog"></ExternalBox>

    </el-drawer>
     <!-- 提箱单信息 -->
    <el-dialog v-model="param.drawerPackingShow" width="80%">
      <packingDataShow ref="packingDataShowRef" :orderId="form.id" :rowData="form" @handleClose="handleClose">
      </packingDataShow>
    </el-dialog>
    <!-- 还箱单信息 -->
    <el-dialog v-model="param.drawerReturnShow" width="80%">
      <returnDataShow ref="returnDataShowRef" :orderId="form.id" :rowData="form" @handleClose="handleClose">
      </returnDataShow>
    </el-dialog>
    <!-- 提示 -->
    <el-dialog v-model="param.dialogVisibleWarning" title="提示" style="width: 400px;">
      <el-form>
        <el-form-item v-if="param.warningName == 'cancelOrder'">
          <h3>确定取消订单吗？</h3>
        </el-form-item>
        <el-form-item prop="remark">
          <div style="width: 100%;">
            <span v-if="param.warningName == 'cancelOrder'">取消原因：</span>
            <span v-else-if="param.warningName == 'rejectOrder'">拒绝原因：</span>
            <span v-else>驳回原因：</span>
          </div>
          <el-input v-model="warningForm.remark" type="textarea" rows="3" max="200" show-word-limit placeholder="请输入"
            style="width: 300px;" />
        </el-form-item>
        <el-form-item v-if="param.warningName == 'cancelOrder'">
          <el-button @click="handleCancel" type="primary" style="float: right;width: 100px;"> 确定
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { computed, onActivated, reactive, ref,onBeforeMount ,getCurrentInstance,provide} from 'vue';
import { useRouter } from 'vue-router';
import orderInfo from '@/store/modules/order'
// import { addBoxCallbackOrder,getOrderData,getOrderPrices} from '@/api/boxCallBack/order'
import { addAgentCallbackOrder, getOrderData, getOrderPrices, updateCallbackOrder, cancelCallbackOrder } from '@/api/boxCallBack/order'
import { processApproved, processRejected } from '@/api/orderCheck/index'

import { userSimpleList } from '@/api/user/index'
import {getBoxInfo } from '@/api/boxCallBack/index'
import { ElLoading,ElMessage } from 'element-plus';
import Cookies from "js-cookie";
import Progress from '@/components/progress/index.vue'
import { getEqbContractOrderInfoLongContractUrl } from '@/api/contract/eQianBao'

import { formatterNumber,containsEmoji } from '@/utils'
import { number } from 'echarts';
import stamp from '@/views/components/stamp';
import stampCancel from '@/views/components/stamp/stampCancel';
import OwnBox from '@/views/components/packingList/ownBox.vue';
import ExternalBox from '@/views/components/packingList/externalBox.vue';
import packingDataShow from '@/views/components/packingDataShow.vue';
import returnDataShow from '@/views/components/returnDataShow.vue';
const props = defineProps({
  isAgent: {   //当前等角色  true 货代角色  false 集装箱公司角色
    type: Boolean,
    default: false   
  }
})
const router = useRouter()
const radioVal=ref(false)
const allIs=ref(true)
const allIsTap=()=>{
  allIs.value=!allIs.value
}


//总回调箱量
const totalHdBox = computed(() => {
  return param.allocation.reduce((acc, cur) => {
    return acc + cur.number
  }, 0)
})
const userSimple = ref([]) // 操作员列表
const userInfo=ref({}) //经办人个人信息
onActivated(() => {
  userInfo.value = JSON.parse(Cookies.get("User-Info"))
  //  let sss=await userOperator()
  //  console.log('ssssssss')
  // getSetBoxInfo();
  getInt()
})
 const getInt =async ()=>{
    //  let sss=await userOperator()
    //  console.log('ssss',sss)
     await userSimpleList({}).then(res => {
      console.log('66666666666',res)
      userSimple.value = res.data
      getSetBoxInfo();
    })
 }
// 获取数据
//show 提示窗口
const warningForm = ref({})
const param = reactive({
  dialogVisibleWarning:false,
  warningName:'',
  dialogEVisibleWarning:false,
  longContractUrl:'',
  packingType:"5",
  packingInfo:[], // 需开提箱单信息
  drawerPackingShow:false,
  drawerReturnShow:false,

})
const mainFileList = ref([]) //图片
const dataInfo=ref({})
const form=ref({})
const allocationList=ref([{
    businessUserId:'',
    businessUserName:'',
    operateUserId:'',
    operateUserName:'',
    businessNo:'',
}])
const priceList=ref([{
  carryCityId:'',
  carryCityName:'',
  carryCountryId:'',
  carryCountryName:'',
  returnCityId:'',
  returnCityName:'',
  returnCountryId:'',
  returnCountryName:'',
  unitPrice:'',
  boxQuantity:0,
}])
const carryCityList=ref([]) //出发城市list
const returnCityList=ref([]) //到达城市list
// const carryCityInfo=ref({}) // 出发城市初始化
const disabledShow=ref(false)
const getSetBoxInfo = async () => {
  const row = orderInfo().rowData
  // console.log('yyyyyyyy',row)
  // userSimple.value = orderInfo().rowData.userSimpleList 
  // console.log('userSimple.value',userSimple.value)
  await getOrderData(row.id).then(async (res: any) => {
    form.value=res.data
    let data=res.data
    mainFileList.value = JSON.parse(data.mainFileList)
     param.packingInfo = []
    param.packingInfo.push(res.data)
    // carryCityList.value = JSON.parse(data.carryCity)
    // carryCityInfo.value = carryCityList.value[0]
   
    returnCityList.value = JSON.parse(data.returnCity)
  
    returnCityList.value.forEach((item) => {
      item.returnCityId =  Number(item.returnCityId)
      item.returnCountryId =  Number(item.returnCountryId)
    })
    priceList.value=data.callbackOrderPriceBeans
    if(res.data.status==2){
      if(res.data.rentSource==10){
        disabledShow.value=true
      }else{
        disabledShow.value=false
      }
    }else{
      disabledShow.value=true
    }
    // if(userSimple.value.length==0){
    //   console.log('666666',2)
    //   userOperator()
    // }


    // getPrice()
    // if(row?.submitData){//详情
    //   let submitData=row.submitData
    //   data.releaseCallbackPriceList.forEach((item,index) => {
    //     if(item.boxType==submitData.boxType && item.boxCondition==submitData.boxCondition){
    //      dataInfo.value= data.releaseCallbackPriceList[index]
    //      console.log(index,'iiiii')
    //     }
    //   })
      
    // }else{//列表
    //   dataInfo.value= data.releaseCallbackPriceList[0]
    // }
    // priceList.value[0]={
    //    carryCityId:'',
    //   carryCityName:'',
    //   carryCountryId:'',
    //   carryCountryName:'',
    //   returnCityId:'',
    //   returnCityName:'',
    //   returnCountryId:'',
    //   returnCountryName:'',
    //   unitPrice:dataInfo.value.unitPrice,
    //   boxQuantity:0,
    // }
  })
}
  const getPrice=()=>{

  getOrderPrices({ "orderId": form.value.id, "orderNo": form.value.orderNo }).then((res: any) => {
    priceList.value=res.data
        // let data = res.data
        // param.priceList = []
        // param.returnCityList = []
        // data.forEach((item: any) => {
        //   param.returnCityList.push({ cityId: item.returnCityId, cityName: item.returnCityName, returnCountry: item.returnCountryId, returnCountryName: item.returnCountryName })
        //   let piiceInfo = {
        //     boxUsagePeriod: item.boxUsagePeriod,
        //     returnCity: item.returnCityId,
        //     number: item.boxQuantity,
        //     boxType: item.boxType,
        //     boxCondition: item.boxCondition,
        //     price: item.unitPrice || 1,
        //     xiaoJi: item.unitSubtotal,
        //     realReturnBoxQuantity: item.realReturnBoxQuantity || 0,
        //     id: item.id,
        //     currency:item.currency,
        //     returnCountry: item.returnCountryId,
        //     returnCityName: item.returnCityName,
        //     returnCountryName: item.returnCountryName
        //   }
        //   param.priceList.push(piiceInfo)
        //   getTotalMoney()
        // })
      })
  }

const totalNumber  = computed(() => {
  let num = 0
  if(priceList.value && priceList.value.length > 0){
    priceList.value.forEach((el) => {
      num =  el.boxQuantity + num
    })
  }
  return num
})
//添加
const handleAdd = (type) => {
  if(type==1){
     if(returnCityList.value.length==priceList.value.length){
      return ElMessage.warning("到达城市只要"+returnCityList.value.length+"个无需重复添加")
    }
     if (priceList.value.length == 10) return ElMessage.warning("最多新增10条数据")
      let data = priceList.value[priceList.value.length - 1] //新增 默认copy最后一行的数据
      let allocation = JSON.parse(JSON.stringify(data))
      allocation.returnCityId=''
      priceList.value.push(allocation)
  }else if(type==2){
    if (allocationList.value.length == 5) return ElMessage.warning("最多新增5条数据")
      let data = allocationList.value[allocationList.value.length - 1] //新增 默认copy最后一行的数据
      let allocation = JSON.parse(JSON.stringify(data))
      allocationList.value.push(allocation)
  }
}
//删除
const handleDelete = (index,type) => {
  if(type==1){
    if(priceList.value.length>1){
    priceList.value.splice(index, 1)
    }else{
      return ElMessage.warning("至少保留1条数据")
    }
  }else if(type==2){
    if(allocationList.value.length>1){
    allocationList.value.splice(index, 1)
    }else{
      return ElMessage.warning("至少保留1条数据")
    }
  }
  
}
//城市选择
const returnCityIdChang=(row,index)=>{
  let returnCityId=[]
  priceList.value.forEach((item: any) => {
    if(item.returnCityId!=''){
      returnCityId.push(item.returnCityId)
    }
  })
  let isReturnCityId =new Set(returnCityId).size !== returnCityId.length
  if(isReturnCityId){
    priceList.value[index].returnCityId=''
    return ElMessage.warning("存在到达城市重复的数据")
  }
}


// const totalMoney = ref(0)


//提交订单
const handleSubmit = async () => {
  let allocationIs=false
  if(!radioVal.value) return ElMessage.warning('请先阅读并同意《集装箱租赁业务规则》和《用户服务协议和管理规则》')
  // if (!carryCityInfo.value.cityId) return ElMessage.warning('出发城市不能为空')
   priceList.value.forEach((el: any) => {
       if (el.unitPrice == '' || el.unitPrice<=0) {
          allocationIs=true
            return ElMessage.warning('箱贴单价不能为空切大于0')
        }   
         if (el.boxQuantity == '' || el.boxQuantity<=0) {
          allocationIs=true
            return ElMessage.warning('预还量不能为空切大于0')
        }   
          if (el.returnCityId == '') {
          allocationIs=true
            return ElMessage.warning('到达城市不能为空')
        }      
    })
  if(allocationIs){
    return false
  }
  if (!form.value.boxUsagePeriod) return ElMessage.warning('箱使期不能为空')
  if (!form.value.planPickupDate) return ElMessage.warning('预计提箱日期不能为空')
  if (!form.value.paymentMethod) return ElMessage.warning('支付方式不能为空')
  if (!form.value.boxEastOperatorUserId) return ElMessage.warning('操作人不能为空')

  //     //操作人
  //  allocationList.value.forEach((el: any) => {  
  //       if (el.businessUserId == '') {
  //         allocationIs=true
  //           return ElMessage.warning('业务员不能为空')
  //       }     
  //       if (el.operateUserId == '') {
  //         allocationIs=true
  //         return ElMessage.warning('操作员不能为空')
  //       }
       
  //        if (el.businessNo == '') {
  //         allocationIs=true
  //           return ElMessage.warning('业务编号不能为空')
  //       }   
  //   })
  // if(allocationIs){
  //   return false
  // }
  handleSign()
}
// 签署
const handleSign = async () => {
      let dataFrom = JSON.parse(JSON.stringify(form.value))
         //操作人
      userSimple.value.forEach((item: any) => {
        if(dataFrom.boxEastOperatorUserId==item.userId){
          dataFrom.boxEastOperatorUserName=item.nickname
          dataFrom.boxEastOperatorUserAreaCode=item.areaCode
           dataFrom.boxEastOperatorUserTel=item.mobile
        }
      })

    priceList.value.forEach((el: any) => {
      returnCityList.value.forEach((item: any) => {
        if (el.returnCityId == item.cityId) {
          el.returnCityName = item.cityName
          el.returnCountryId = item.countryId
          el.returnCountryName = item.countryName
        }
      })
      
    })
    // carryCityList.value.forEach((item: any) => {
    //     if (carryCityInfo.value.cityId == item.cityId) {
    //       carryCityInfo.value.cityName = item.cityName
    //       carryCityInfo.value.countryId = item.countryId
    //       carryCityInfo.value.countryName = item.countryName
    //     }
    //   })
      //操作人
  //  allocationList.value.forEach((el: any) => {
  //     userSimple.value.forEach((item: any) => {
  //       if (el.businessUserId == item.userId) {
  //         el.businessUserName = item.nickname
  //       }
  //       if (el.operateUserId == item.userId) {
  //         el.operateUserName = item.nickname
  //       }
  //     })
      
  //   })

    // dataFrom.allocation= JSON.stringify(allocationList.value)
    dataFrom.callbackOrderPriceBeans= priceList.value

    console.log('data',dataFrom)
    // return false

  await updateCallbackOrder(dataFrom).then((res: any) => {
    // router.push('agentMarketHuiDiaoBox')
    // ElMessage.success('下单成功')
    handleMakeSure()
  })
}
//待确认->通过、确认 btn
// const allocationRef = ref({ allocation: [], onSubmit: () => { }, getAllocationTemplate: () => { } })
const handleMakeSure = async () => {
  // if(!param.radioVal) return ElMessage.warning('请先阅读《集装箱租赁业务规则》、《用户服务协议和管理规则》并同意全部条款')
  const loading = ElLoading.service({
    lock: true,
    text: '数据请求中，请稍后....',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  // param.isShowMakeSureBtn = false
  // if (props.isAgent) { // 货代校验项
  //   if (!param.priceList || param.priceList.length == 0 || !param.priceList[0].boxUsagePeriod) {
  //     return ElMessage.warning('箱使期不能为空')
  //   }
  //   if (!rowData.value.rate) return ElMessage({ message: '请先确认 执行汇率', type: 'warning' })
  //   const allocationValidate = await allocationRef.value.onSubmit()
  //   if (!allocationValidate) {
  //     ElMessage.warning('订单分配 校验未通过')
  //     return
  //   }
  //   if (couldAddQuantity.value < 0) {
  //     ElMessage.error('总数量不能大于订单回调箱总量')
  //     return
  //   }
  // }

  // if (!rowData.value || !rowData.value.processId) return ElMessage({ message: 'processId 未找到！', type: 'error' })
  let data = { "processId": form.value.processId }
  // if (rowData.value.status < 5 && !props.isAgent) { // 集装箱公司 一审时提交下的保存pricelist
  //   if (!param.userSimple) return ElMessage.warning('请选择操作员!')
  //   const updateOrderSucess = await handleUpdateOrder() //更新订单
  //   if (!updateOrderSucess) return ElMessage({ message: '保存失败！', type: 'error' })
  // }
  processApproved(data).then(() => {
    // param.isShowMakeSureBtn = true
    loading.close()
    ElMessage({ message: '确认成功', type: 'success' })
    getSetBoxInfo()
  }).catch(() => {
    loading.close()
    // param.isShowMakeSureBtn = true
  })
}

const handleShowWarning = (val: String) => {
  if (val == 'cancelOrder' || val == 'rejectOrder') { //取消订单、拒绝
    param.dialogVisibleWarning = true
    param.warningName = val
  }
  if (val == 'checkReject') { //审核驳回
    handleReject('checkReject')
  }
}
// 取消订单
const handleCancel = () => {
  if (!warningForm.value || !warningForm.value.remark) {
    return ElMessage({ message: '请输入取消 原因', type: 'warning' })
  }
  const data = {
    id: orderInfo().rowData.id,
    remark: warningForm.value.remark
  }
  cancelCallbackOrder(data).then((res: any) => {
    ElMessage.success('取消申请已发送')
    param.dialogVisibleWarning = false
    getSetBoxInfo()
  })
}
//签约
const showContract = async (type = 1) => {
  // const userStore = useUserStores()
  // const user = userStore.getUser() //user信息
   const loading = ElLoading.service({
    lock: true,
    text: '合同生成中...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  const data = {
    "orderId": form.value.id,
    // "companyId": user.companyId,
    "businessType": 10
  }
   await getEqbContractOrderInfoLongContractUrl(data).then((res: any) => {
      const contractObj = res.data
      if (contractObj) {
        param.longContractUrl = contractObj.longTerminateUrl ? contractObj.longTerminateUrl : contractObj.longContractUrl //解约操作在后，优先显示解约合同
        if (param.longContractUrl) {
          param.dialogEVisibleWarning = true
        }
          loading.close()

      } else {
        param.longContractUrl = null
        ElMessage.warning('系统繁忙！请稍后再试')
          loading.close()

      }
    })

}
//开提箱单
const handlePacking = () => {
  param.drawerPacking = true
}
//关闭提箱单
const closeDialog = () => {
  param.drawerPacking = false
}

const packingInfoStr = () => {
  return param.packingInfo
}
provide('packingInfo',  packingInfoStr);

provide('config', {
  disable:true, // 订单选择弹窗 筛选项是否可选
  sources: "internal", // 组件引用来源： internal-订单内开提箱单 ， management -提箱管理内开提箱单
  orderType: 10, // 订单类型 5：租箱 10：回调箱  
});
//完成签署
const { proxy } = getCurrentInstance()

const completeSigning = (id) => { 
  let reqParam = { // 5:租箱 10：回调（进口） 15：购箱 
    orderId:form.value.id,
    businessType:10
  }
  proxy.$common(reqParam).then((res) => { 
    if(res.code === "00000"){
      ElMessage.success('操作成功')
      getSetBoxInfo();
    }else{
      ElMessage.warning(res.msg)
    }
  })
}
//查看提箱单 
const packingDataShowRef = ref({ showPacking: () => { } })
const showPacking = () => {
  param.drawerPackingShow = true
  packingDataShowRef.value.showPacking()
}
//查看还箱单 
const returnDataShowRef = ref({ showReturn: () => { } })
const showReturnInfo = () => {
  param.drawerReturnShow = true
  returnDataShowRef.value.showReturn()
}
const handleClose = () => {
  param.drawerPackingShow = false
  param.drawerReturnShow = false
}
// 查询操作员import { userSimpleList } from '@/api/user/index'
const  userOperator = ()=>{
  userSimpleList({}).then(res => {
    console.log('66666666666',res)
    userSimple.value = res.data
  })
}

</script>
<style lang="scss" scoped>
.lookUp{
  margin: 0 !important ;
  padding: 20px 0;
  span{
    height: 40px;
  }
}
.pag-container {
  margin-top: 20px;
  box-sizing: border-box;
  // padding: 10px;
}

.el-form--inline .el-form-item {
  margin-right: 8px;
}



.mian-cen-top{
  display: flex;
  margin-top: 20px;
}
.mian-cen-top-fr{
  flex: 1;
}
.mian-cen-list{
  display: flex;
  align-items: center;
  padding: 10px 0;
  // justify-content: space-between;
}
.mian-cen-item{
  display: flex;
  align-items: center;
  width: 30%;
  margin-right: 3%;
}
.item-label{
  width: 120px;
}
.item-value{
 flex:1,
}
.foot{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.foot-list{
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  background: #fff !important;
  padding: 20px 0;
  border-top: 1px solid #eeeeee;
  box-shadow: 0 -1px 0 0 #efefef;
}
.title-top-fl{
  font-weight: bold;
}
.xlMain{
  margin-top: 20px;
}
.xlMain-list{
  display: flex;
  padding: 10px 0;
}
.xlMain-lable{
  width: 21%;
  margin: 0 2%;
  text-align: center;
}
.remak{
  margin-top:10px;
}
.remak-title{
  margin-bottom: 10px;
}
.app-container{
  padding-bottom: 100px;
}
.zlAmo{
  border-top: 1px solid #eeeeee;
  text-align: right;
  padding:20px 80px;
  margin-top: 20px;
}
</style>